<template>
  <div>
    <!-- header 标题栏 -->
    <mt-header fixed title="" style="background-color: #efcccc">
      <div slot="left">
        <img
          src="http://static.wdmcake.cn/public/wap/home/img/logo.png"
          alt=""
        />
      </div>
      <div slot="right" v-if="$store.state.islogin">
        欢迎:{{ $store.state.name }}
      </div>
      <div slot="right" v-else>
        <router-link class="link" to="/register">注册</router-link>
        &nbsp;
        <router-link class="link" to="/login">登录</router-link>
      </div>
    </mt-header>
    <mt-tab-container
      v-infinite-scroll="loadmore"
      infinite-scroll-distance="20"
      infinite-scroll-disabled="busy"
      :infinite-scroll-immediate-check="true"
      style="margin-bottom: 55px"
    >
      <mt-tab-container-item>
        <!-- 轮播图 -->
        <mt-swipe
          :style="{ height: h }"
          :speed="500"
          :auto="5000"
          :continuous="true"
        >
          <mt-swipe-item>
            <img src="/images/001-01.jpg" alt="" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/images/002-01.jpg" alt="" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="/images/003-01.jpg" alt="" />
          </mt-swipe-item>
        </mt-swipe>
        <!-- 单一文章信息开始 -->
      </mt-tab-container-item>
    </mt-tab-container>
    <!-- 功能导航 -->

    <van-row
      type="flex"
      justify="space-around"
      style="font-size: 14px; margin-bottom: 20px"
    >
      <van-col span="3" style="width: 60px"
        > <router-link to="/fenlei">
        <img
          src="@/assets/gongnengdaohang/dangao.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        /></router-link>
        <p>蛋糕商城</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/guanwang.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>西点外卖</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/youji.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>全国邮寄</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/kapian.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 8px">提货卡</p></van-col
      >
    </van-row>
    <van-row
      type="flex"
      justify="space-around"
      style="font-size: 14px; margin-bottom: 20px"
    >
      <van-col span="3" style="width: 60px">
        <img
          src="@/assets/gongnengdaohang/order_y.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">我的</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/zizhu.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>自助点餐</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/ziti.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>预点自提</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/gongnengdaohang/chaxun.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>自助查询</p></van-col
      >
    </van-row>

    <!-- 美味不断 -->
    <van-divider
      :style="{ color: '#e4014f', borderColor: '#e4014f', padding: '0 16px' }"
    >
     <h5 style="font-size:15px">美味惠不断</h5> 
    </van-divider>
    <van-grid :border="false" :column-num="2">
      <van-grid-item class="van-grid-item">
        <van-image
          style="width: 100%;border-radios:50px"
          class="vant-image"
          text=""
          src="http://static.wdmcake.cn/public/wap/home/img/011.png"
        />
        <p>每日秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          style="width: 100%"
          class="vant-image"
          src="http://static.wdmcake.cn/public/wap/home/img/013.png"
        />
        <p>热销专区</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          style="width: 100%"
          class="vant-image"
          src="http://static.wdmcake.cn/public/wap/home/img/015.png"
        />
        <p>节日专区</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          style="width: 100%"
          class="vant-image"
          src="http://static.wdmcake.cn/public/wap/home/img/014.png"
        />
        <p>囤货专区</p>
      </van-grid-item>
    </van-grid>

    <!-- 美味送到家 -->
    <van-divider
      :style="{ color: '#e4014f', borderColor: '#e4014f', padding: '0 16px' }"
    >
     <h5 style="font-size:15px">美味送到家</h5>
    </van-divider>
    <van-row
      type="flex"
      justify="space-around"
      style="font-size: 14px; margin-bottom: 20px"
    >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/mwhome/zaocan.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">早餐</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/mwhome/wucan.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">午餐</p>
      </van-col>
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/mwhome/xiawucha.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">下午茶</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/mwhome/taocan.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">套餐</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/mwhome/dangao.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 15px">蛋糕</p></van-col
      >
    </van-row>

    <!-- 自助无接触 -->
    <van-divider
      :style="{ color: '#e4014f', borderColor: '#e4014f  ', padding: '0 16px' }"
    >
     <h5 style="font-size:15px;">自助无接触</h5>
    </van-divider>
    <van-row
      type="flex"
      justify="space-around"
      style="font-size: 14px; margin-bottom: 20%"
    >
      <van-col span="3" style="width: 60px">
        <img
          src="@/assets/zizhu/ziti.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p>预点自提</p>
      </van-col>
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/zizhu/guanwang.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="margin-left: 10px">外卖</p></van-col
      >
      <van-col span="3" style="width: 60px">
        <img
          src="@/assets/zizhu/zizhu.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="display: block">自助点餐</p></van-col
      >
      <van-col span="3" style="width: 60px"
        ><img
          src="@/assets/zizhu/phone.png"
          alt=""
          style="width: 50px; margin-left: 5px; margin-bottom: 10px"
        />
        <p style="display: block">订购热线</p></van-col
      >
    </van-row>
    <!-- 底部选项卡 -->
    
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img
          v-if="selected == 'home'"
          src="@/assets/common/001.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/002.png" alt="" slot="icon" />
        首页</mt-tab-item
      >
      <mt-tab-item id="liebiao">
        <img
          v-if="selected == 'liebiao'"
          src="@/assets/common/003.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/004.png" alt="" slot="icon" />
        分类</mt-tab-item
      >
      <mt-tab-item id="shop">
        <img
          v-if="selected == 'shop'"
          src="@/assets/common/005.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/009.png" alt="" slot="icon" />
        购物车</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="@/assets/common/010.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/common/008.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navactive: "1",
      selected: "home",
      h: "210px",
      cats: [],
      articles: [],
      page: 1, //保存当前页码
    };
  },
  watch: {
    // 监听底部选项卡
    selected(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "me") {
        this.selected = "home";
        this.$router.push("/me");
      }else if (newValue == "shop") {
        this.selected = "home";
        this.$router.push("/shop");
      }else if (newValue == "liebiao") {
        this.selected = "home";
        this.$router.push("/liebiao");
      }
    },
  },
  methods: {
    // 轮播高设置
   initSwipe() {
      let screenw = window.screen.width;
      let picW = 1242;
      let picH = 698;
      let swipeh = Math.floor((picH * screenw) / picW) + "px";
      this.h = swipeh;
    },
  },
};
</script>

<style scoped>
.link {
  color: white;
}
.mint-swipe-item img {
  display: block;
  width: 100%;
}
.vant-image{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.van-grid-item p{
  width: 100%;
  box-shadow: 1px  1px  4px  -1px ;
  border-top:0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.gongnengdaohang ul li {
  text-align: center;
  font-size: 15px;
  margin: 15px;
  padding: 3px;
}
.gongnengdaohang ul {
  margin-top: -30px;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
}
.mwhome ul li {
  text-align: center;
  font-size: 15px;
  margin: 6px;
  padding: 3px;
}

.mwhome ul {
  margin-top: -30px;
  margin-left: 12px;
  display: flex;
  flex-wrap: wrap;
}
.mwhome div {
  text-align: center;
  padding: 5px;
  color: red;
  margin-top: 10px;
  margin-bottom: 20px;
}
.zizhuwujiechu ul li {
  text-align: center;
  font-size: 15px;
  margin: 15px;
  padding: 3px;
}

.zizhuwujiechu ul {
  margin-top: -30px;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
}
.zizhuwujiechu div {
  text-align: center;
  padding: 5px;
  color: red;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
